<template>
  <div ref="trend_echart" id="trend_echart"></div>
</template>
<script>
export default {
  methods: {
    initCcgkSxlChart() {
      fetch(`./testData/trenddata.json`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => response.json())
        .then((data) => {
          let {xData, max, interval, todayData, yesterdayData} = data

          let option = {
            title: {
              text: "",
              textStyle: {
                color: "#fff",
              },
            },
            legend: {
              top: 0,
              data: [
                {
                  name: "今日车流量",
                  textStyle: {
                    color: "#fff",
                  },
                },
                {
                  name: "昨日车流量",
                  textStyle: {
                    color: "#fff",
                  },
                },
              ],
            },
            xAxis: {
              type: "category",
              data: xData,
              axisLabel: {
                color: "#fff",
              },
            },
            yAxis: {
              type: "value",
              min: 0,
              max,
              interval,
              axisLabel: {
                formatter: "{value}",
                color: "#fff",
              },
              splitLine:{
                show: false
              }
            },
            grid: {
              top: "20%",
              left: "3%",
              right: "4%",
              bottom: "2%",
              containLabel: true,
            },
            series: [
              {
                name: "今日车流量",
                data: todayData,
                type: "line",
                lineStyle: {
                  color: "#00FFE6",
                },
                itemStyle: {
                  color: "#fff",
                },
              },
              {
                name: "昨日车流量",
                data: yesterdayData,
                type: "line",
                lineStyle: {
                  color: "#0092FF",
                },
                itemStyle: {
                  color: "#fff",
                },
              },
            ],
          };

          let myChart = echarts.init(this.$refs.trend_echart);
          myChart.setOption(option, true);

          window.addEventListener("resize", () => {
            myChart.resize();
          });
        });
    },
  },
  mounted() {
    this.initCcgkSxlChart();
  },
};
</script>
<style lang="scss" scoped>
#trend_echart {
  height: 100%;
  width: 100%;
}
</style>
